<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 新增角色按钮 -->
        <el-row style="height:60px">
          <el-button
            icon="el-icon-plus"
            size="small"
            type="primary"
            @click="showDialog"
          >新增角色</el-button>
        </el-row>
        <!-- 表格 -->
        <el-table :data="roles">
          <el-table-column label="序号" width="120" type="index" :index="indexMethod" />
          <el-table-column label="角色名称" width="240" prop="name" />
          <el-table-column label="描述" prop="description" />
          <el-table-column label="操作" width="240" fixed="right">
            <template #default="{row}">
              <el-button size="small" @click="assignPermission(row.id)">分配权限</el-button>
              <el-button size="small" @click="editRole(row.id)">编辑</el-button>
              <el-button size="small" type="danger" @click="delRole(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 
        
          分页核心逻辑：页数 = 总条数 / 每页显示的条数 （向上取整）,elementui 默认显示每页10条
          分页：点击分页，让表格渲染当前页数据
            （1）点击时获取到当前页
            （2）将当前页作为page参数，然后去调用接口数据
            （3）拿到数据后再重新交给table绑定的响应数据
        -->
        
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <!-- 分页组件 -->
          <el-pagination layout="prev,pager,next" :total="total" :page-size="pass.pagesize" @current-change="getPage" />
        </el-row>
      </el-card>
    
    </div>
    <!-- 新增角色和编辑角色的弹框 -->  
    <add-role ref="addrole" :dialog-visble="roledialogVisible" @close-dialog="closeDialog" @update-list=" getRoles" />  
    <el-dialog class="assign-role" title="分配角色" :visible="showRoleDialog" @close="closeAssignPermission">
      <!-- 这里准备复选框 -->
      <!-- node-key="id":辅助下面的两个方法，拿到id -->
      <el-tree
        ref="tree"
        :data="permissionList"
        :props="{ label: 'name' }"
        :default-expand-all="true"
        :show-checkbox="true"
        :check-strictly="true"
        node-key="id"
      />
      <template #footer>
        <el-button type="primary" size="small" @click="confirmAssign">确定</el-button>
        <el-button size="small">取消</el-button>
      </template>
    </el-dialog>

  </div>
</template>

<script>
/*
   1、获取角色列表的流程
    （1）封装好接口
    (2)在data中准备一个响应式数据
    （3）调用获取角色列表的接口，并传入一个对象，包括了页码和每页条数
    （5）将从接口中获取到的数据赋值给data中的响应数据
    （5）在表格中绑定响应数据
  2、分页流程
        核心分页逻辑：
          （1）页数：=总条数/每页条数 total/pagesize
          要求：需要给组件传递两个必要的参数，total，pagesize(每页10条)
  3、分页和table联动
    效果：当点击页数的的时候，上面也显示当前页的数据
    思路：
    （1）决定table当前table渲染的数据是由什么决定的？ page
    （2）点击页码，就得到页码数字，然后赋值给page，然后使用最新的page得到当前的数据列表，最后重新调用一下角色列表
  4、新增的写法：将弹框的部分拆分成一个组件，在index。vue中引入
    父传子：把控制弹框的显示有父组件中的属性决定
    子传父：关闭事件的发生是在子组件中，而控制弹框的属性在父组件
    为什么要抽离出去？
      （1）复习一下父传子，子传父
      （2）好维护
      （3）但凡
*/

import {getRoleAPI, delRoleAPI, assignPermissionAPI, getRoleIdAPI} from '@/api/setting'
import AddRole from './component/add-role.vue'
import {getPermissionList} from '@/api/permission'
import tree from '@/utils/tree'
export default {
  name: 'SettingVue',
  components: {
    AddRole
  },
  data(){
    return {
      roles: [],
      // 总条数
      total: 0,
      pass: {
        // 页码
        page: 1,
        // 每页要展示的条数
        pagesize: 5
      },
      roledialogVisible: false,
      // 分配权限弹框
      showRoleDialog: false,
      // 存放权限点数组
      permissionList: [],
      // 角色id
      roleId: null 
    }
  },
  mounted(){
    this.getRoles()
  },
  methods: {
    // 获取角色列表
    async  getRoles(){
      const res = await getRoleAPI(this.pass)
      this.roles = res.rows
      this.total = res.total
    },
    // 得到当前页面
    getPage(page){
      // 将当前页码作为page的参数
      this.pass.page = page
      // 然后重新发送请求，获取到当前页的数据
      this.getRoles()
    },
    // 删除角色
    delRole(id) {
      this.$confirm('确定删除此角色?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delRoleAPI(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        // 更新列表
        this.getRoles()
      }).catch(() => {         
      });
    },
    // 显示新增角色弹框
    showDialog(){
      this.roledialogVisible = true
    },
    
    // 关闭弹框
    closeDialog(){
      this.roledialogVisible = false
    },
    // 显示编辑角色弹框
    editRole(id){
      this.roledialogVisible = true
      // 通过获取子组件的实例对象，调用它内存的方法或直接操作属性
      this.$refs.addrole.getRoleData(id)
    },
    // 表格的索引号以2,4,6开头
    indexMethod(index) {
      const current = this.pass.page
      const psize = this.pass.pagesize
      return (index+1) + (current - 1) * psize
    },
    // 点击分配权限，打开弹框
    async  assignPermission(id){
      this.roleId = id
      this.showRoleDialog = true
      // 获取权限节点列表
      const res = await getPermissionList()
      this.permissionList = tree(res)
      // 使用角色id获取指定角色的详情，并将选中的权限点回显
      const roleDetail = await getRoleIdAPI(this.roleId)
      // 通过设置tree方法进行id回显
      this.$refs.tree.setCheckedKeys(roleDetail.permIds)
    },
    // 关闭分配权限弹框
    closeAssignPermission(){
      this.showRoleDialog = false
    },
    // 分配权限
    async  confirmAssign(){
      // permIds:由被选中的权限点id组成的数组
      // this.$refs.tree.getCheckedKeys()：拿到树形组件被选中的节点，返回一个数组
      await assignPermissionAPI({id: this.roleId, permIds: this.$refs.tree.getCheckedKeys()})
      this.$message.success('分配权限点成功')
      // 清空选中的节点
      this.$refs.tree.setCheckedKeys([]);
      this.showRoleDialog = false

    }
  }
}
</script>

<style scoped>
.container{
  padding: 20px;
}
</style>
